<template>
  <div class="playpage">
    <div
      class="mark"
      :style="{
        backgroundImage:
          'url(' + img + '?imageView=1&type=webp&thumbnail=246x0)',
      }"
    ></div>
    <div class="head">
      <div class="return" @click="$parent.popup = false"></div>
      <div class="title">
        <h3>{{ playingSong.name }}</h3>
        <span>
          <span class="name" v-for="singer in playingSong.ar" :key="singer.id">
            {{ singer.name }}
          </span>
        </span>
      </div>
      <div class="share"></div>
    </div>

    <div class="mid">
      <keep-alive>
        <PlayDisc
          :playingSong="playingSong"
          :playingStatus="playingStatus"
          v-if="!showLyric"
          @click.native="showLyric = true"
          :img="img"
        ></PlayDisc>
        <PlayLyric
          v-else
          :lyric="lyric"
          :current="current"
          :total="total"
        ></PlayLyric>
      </keep-alive>
    </div>

    <div class="footer">
      <div class="pmgressbar">
        <h6>{{ currentTime }}</h6>
        <div class="bar">
          <input
            type="range"
            min="0"
            :max="total"
            v-model="value"
            @input="changing = true"
            @change="gochange"
          />
          <span :style="{ width: (value / total) * 100 + '%' }">
            <p></p>
          </span>
        </div>
        <h6>{{ totalTime }}</h6>
      </div>
      <div class="btn">
        <span @click="$emit('toggle')" :class="playMethod"></span>
        <span @click="$emit('update:last-song')"></span>
        <span v-if="!playingStatus" @click="$parent.$refs.audio.play()"></span>
        <!-- <span v-if="playingStatus"></span> -->
        <span v-else class="pause" @click="$parent.$refs.audio.pause()"></span>
        <span @click="$emit('update:next-song')"></span>
        <span @click="$parent.listShow = true"></span>
      </div>
    </div>
    <transition name="fade">
      <div class="prompt" v-if="playMethodCN">
        <span>{{ playMethodCN }}</span>
      </div>
    </transition>
  </div>
</template>

<script>
import PlayDisc from "@/components/PlayDisc.vue";
import PlayLyric from "@/components/PlayLyric.vue";

export default {
  components: {
    PlayDisc,
    PlayLyric,
  },
  props: [
    "playingSong",
    "total",
    "current",
    "playingStatus",
    "lyric",
    "playMethod",
  ],
  data: function () {
    return {
      value: this.current,
      changing: false,
      showLyric: false,
      playMethodCN: "",
    };
  },
  methods: {
    gochange() {
      if (this.changing) {
        this.$emit("change-current", this.value);
        this.changing = false;
      }
    },
  },
  computed: {
    img() {
      return this.playingSong.al
        ? this.playingSong.al.picUrl
        : this.playingSong.picUrl;
    },
    currentTime() {
      let m =
        Math.floor(this.current / 60) < 10
          ? "0" + Math.floor(this.current / 60)
          : Math.floor(this.current / 60);
      let s =
        Math.floor(this.current % 60) < 10
          ? "0" + Math.floor(this.current % 60)
          : Math.floor(this.current % 60);

      return m + ":" + s;
    },
    totalTime() {
      let m =
        Math.floor(this.total / 60) < 10
          ? "0" + Math.floor(this.total / 60)
          : Math.floor(this.total / 60);
      let s =
        Math.floor(this.total % 60) < 10
          ? "0" + Math.floor(this.total % 60)
          : Math.floor(this.total % 60);

      return m + ":" + s;
    },
  },
  watch: {
    current: function (n) {
      if (!this.changing) {
        this.value = n;
      }
    },
    playMethod(n) {
      switch (n) {
        case "circulation": {
          this.playMethodCN = "循环播放";
          setTimeout(() => {
            this.playMethodCN = "";
          }, 2000);
          break;
        }

        case "random": {
          this.playMethodCN = "随机播放";
          setTimeout(() => {
            this.playMethodCN = "";
          }, 2000);
          break;
        }

        case "sequence": {
          this.playMethodCN = "顺序播放";
          setTimeout(() => {
            this.playMethodCN = "";
          }, 2000);
          break;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  // transform: translateY(100vh);
}
.playpage {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  overflow: hidden;
  padding: 10px;
  .mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.8);
    transform: scale(1.2);
  }
  .head {
    display: flex;
    .return {
      width: 50px;
      height: 50px;
      background-image: url("../assets/dj3.png");
      background-size: 40%;
      background-position: 5px center;
      background-repeat: no-repeat;
    }
    .share {
      width: 50px;
      height: 50px;
      background-image: url("../assets/dtn.png");
      background-size: 70%;
      background-position: 20px center;
      background-repeat: no-repeat;
    }
    .title {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      h3 {
        text-align: center;
        font-size: 14px;
        width: 25vh;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      span {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        width: 25vh;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        .name {
          &::after {
            content: "/";
          }
          &:last-of-type {
            &::after {
              content: "";
            }
          }
        }
      }
      color: #fff;
    }
  }

  .mid {
    width: 100%;
    height: calc(100vh - 200px);
  }

  .footer {
    position: fixed;
    bottom: 0;
    padding: 10px;
    left: 0;
    width: 100vw;
    height: 120px;
    .pmgressbar {
      width: 100%;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h6 {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
        transform: scale(0.8);
        &:first-child {
          margin-right: 5px;
        }
        &:last-child {
          margin-left: 5px;
        }
      }
      .bar {
        flex: 1;
        height: 2px;
        position: relative;
        padding: 0 10px;
        background-color: rgba(255, 255, 255, 0.2);

        input {
          width: 100%;
          z-index: 10;
          position: absolute;
          left: 0;
          opacity: 0;
        }
        span {
          display: block;
          height: 100%;
          background-color: purple;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          background-color: rgba(255, 255, 255, 0.4);
          p {
            width: 5px;
            height: 5px;
            position: absolute;
            right: -2.5px;
            top: -1.2px;
            background-color: #fff;
            border-radius: 50%;
          }
        }
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
      span {
        margin: 10px;
        width: 40px;
        height: 40px;
        background-image: url("../assets/dsx.png");
        background-size: 100%;
        &.pause {
          background-image: url("../assets/dsv.png");
        }
        &:nth-child(1) {
          &.circulation {
            background-image: url("../assets/dud.png");
          }
          &.random {
            background-image: url("../assets/dv7.png");
          }
          &.sequence {
            background-image: url("../assets/duq.png");
          }
        }
        &:nth-child(2) {
          background-image: url("../assets/dsz.png");
        }
        &:nth-child(3) {
          width: 50px;
          height: 50px;
        }
        &:nth-child(4) {
          background-image: url("../assets/dst.png");
        }
        &:nth-child(5) {
          background-image: url("../assets/dvd.png");
        }
      }
    }
  }
  .prompt {
    width: calc(100vw - 20px);
    position: absolute;
    bottom: 25vh;
    display: flex;
    justify-content: center;
    span {
      display: block;
      padding: 0 5px;
      border-radius: 5px;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 12px;
      color: #fff;
    }
  }
}
</style>